<template>
    <div class="container">
        <div class="login-wrap">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <h3 class="title">用户登录</h3>
                <el-form-item  prop="name">
                    <el-input v-model="ruleForm.name" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                    <el-input v-model="ruleForm.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width:100%" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </template>
  
  <script>
  export default {
      name: 'login',
      data() {
          return {
              ruleForm: {
                  name: '',
                  password:''
              },
              rules: {//校验规则
                  name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
                  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
              },
          };
      },
      methods: {
          submitForm(formName) {
              this.$refs[formName].validate((valid) => {
              if (valid) {
                  // alert('submit!');
                  this.$store.commit('login',true)
                  alert('恭喜你，登录成功')
                  this.$router.push({path:'/index'})
              } else {
                  console.log('error submit!!');
                  return false;
              }
              });
          },
          resetForm(formName) {
              this.$refs[formName].resetFields();
          }
      }
  }
  </script>
  
  <style scoped>
    .container{
      background-image: url();
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-top:5%;
  }
  .login-wrap{
      width:350px;
      margin: 0 auto;
      padding:30px 40px;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
      border-radius: 10px;
  }
  .title {
      text-align: center;
      margin: 0 auto 30px;
  }
  </style>
  